
import { useAuth0 } from "@auth0/auth0-react";
import React, { useRef, useEffect } from 'react'
import { useNavigate } from "react-router-dom";
import { Card, Button, Typography, Row, Col, Divider } from "antd";
import "../style/login.css";

const { Title, Paragraph } = Typography;

export default function Login() {
    const navigate = useNavigate();
    const videoRef = useRef(document.getElementById('videoCover'));
    const { isAuthenticated, loginWithRedirect } = useAuth0();
    const signUp = () => loginWithRedirect({ screen_hint: "signup" });

    const handleVideoPlay = () => {
        console.log(videoRef)
        if (videoRef) {
            videoRef.current.play();
        }
    };
    return (
        <div className="home">
            <video
                ref={videoRef}
                muted
                id="videoCover"
                onCanPlay={handleVideoPlay}
                src="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr" autoPlay loop crossOrigin="anonymous" style={{ position: 'fixed', width: '100%', height: '100%', objectFit: 'cover' }}></video>
            <Row justify="center" align="middle" style={{ minHeight: '100vh' }}>
                <Col>
                    <Card style={{ width: 300, backgroundColor: "rgba(255, 255, 255, 0.2)", backdropFilter: 'blur(7px)' }}>
                        <Title level={2}>CineRate</Title>
                        <Paragraph>Welcom to CineRate System</Paragraph>
                        {!isAuthenticated ? (
                            <Button type="primary" block onClick={loginWithRedirect}>
                                Login
                            </Button>
                        ) : (
                                <Button type="primary" block onClick={() => navigate("/app")}>
                                    Enter App
                                </Button>
                            )}
                        <Divider plain className="login_divid">OR</Divider>
                        <Button type="default" block onClick={signUp}>
                            Create Account
                        </Button>
                    </Card>
                </Col>
            </Row>
        </div>
    );
}
